<template>
    <div>
        <headers title="详情"></headers>
        <van-tabs v-model:active="active">
            <van-tab title="标签 1">
                <swipers :list=list.pics></swipers>
                <p>{{ list.goods_name }}</p>
                <p style="color: red;">{{ list.goods_price }}$</p>
            </van-tab>
            <van-tab title="详细">
                <div v-html="list.goods_introduce"></div>
            </van-tab>
            <van-tab title="评价">评价</van-tab>
        </van-tabs>
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" dot />
            <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
            <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
            <van-action-bar-button type="warning" text="加入购物车" @click="toshop()" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
    </div>
</template>

<script setup>
import headers from '@/components/headers.vue';
import swipers from '@/components/swipers.vue';
const active = ref(0);
import { detailApi } from '@/api/api';
import { ref } from 'vue';
import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
let goods_id = ref(route.query.goods_id)
//轮播图
let list = ref({})
const getlist = () => {
    detailApi(goods_id.value).then((res) => {
        list.value = res.data.message
    })
}
getlist()
const toshop = () =>{
    store.shopcar(list.value)
    router.push('/shoplist')
}
</script>

<style lang="scss" scoped></style>